<template>
  <div class="mod-home">
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3 style="display:inline-block">登录统计</h3>

            <div style="float: right; padding: 3px 0">{{
              text.todayH5Login.msg +
              " : " +
              text.todayH5Login.data
              }}
              <br>
              {{
              text.todayH5LoginByAccount.msg +
              " : " +
              text.todayH5LoginByAccount.data
              }}
            </div>
            <div></div>
          </div>
          <div class="text item">
            <el-table :data="text.accountList.data" style="width: 100%">
              <el-table-column prop="userCode" label="账户" width="180">
              </el-table-column>
              <el-table-column prop="loginCount" label="今日登录次数" width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3 style="display:inline-block">销售统计</h3>
          </div>
          <div class="text item">
            <div>{{text.soldMoneySum.msg+' : '+text.soldMoneySum.data}}</div>
            <div>{{text.soldProdCount.msg+' : '+text.soldProdCount.data}}</div>
          </div>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3 style="display:inline-block">待发货商品数量</h3>
          </div>

          <el-table :data="data.records" style="width: 100%;  text-align: center !important;"   >
            <el-table-column prop="prodName" label="产品名称" width="180"  :align='center'>
            </el-table-column>
            <el-table-column prop="prodSum" label="数量" width="180">
            </el-table-column>
          </el-table>
          <el-pagination class="pagination" background layout="prev, pager, next" :total="data.total" :page-size='5'
          @current-change='add'>
        </el-pagination>
        </el-card>


      </el-col>

    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: {},
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        data: '',
        newsItem: ''
      };
    },
    mounted() {
      this.$http({
        url: this.$http.adornUrl("/main"),
        method: "get"
      }).then(res => {
        this.text = JSON.parse(res.request.response);
        console.log(this.text);
      });

      this.$http({
        url: this.$http.adornUrl("/main/undvyProdsum"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(
            {
              current: 1,
              size: 5
            },
          )
        )

      }).then(res => {
        this.data = res.data
        console.log(res.data);
        this.newsItem = Math.ceil(res.data.total / 5)
      });
    },
    methods: {
      async  add(e) {
        await   this.$http({
        url: this.$http.adornUrl("/main/undvyProdsum"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(
            {
              current: e,
              size: 5
            },
          )
        )

      }).then(res => {
        this.data = res.data

      });
      }
    }
  };
</script>

<style  >
 .el-table .cell{
    text-align: center !important;
  }
  .el-pagination{
    text-align: center !important;
    margin-top: 20px !important;
  }
  .pagination {
  margin: auto;
  }

  .mod-home {
    line-height: 1.5;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
    margin: 30px auto;
  }
</style>
